<template>
  <div>
    <!--menu-->
    <div class="disflex jsbet pl16 pr16 lh49 ca8 fs16 ordertype bgfff">
      <span :class="order_type == 1 ? 'active' : '' " @click="order_type_tap(1)">待付款</span>
      <span :class="order_type == 2 ? 'active' : '' " @click="order_type_tap(2)">待发货</span>
      <span :class="order_type == 3 ? 'active' : '' " @click="order_type_tap(3)">待收货</span>
      <span :class="order_type == 4 ? 'active' : '' " @click="order_type_tap(4)">已完成</span>
      <span :class="order_type == 5 || order_type == 6 ? 'active' : '' " @click="order_type_tap(5)">退款/售后</span>
    </div>

    <!--订单-->
    <div class="pl15 pr15" v-if="cart_lists.length">
      <div class="mt11" v-for="(cart_item,k) in cart_lists" :key="k">
<!--        <OrderItem :orderData="cart_item" :orderIndex="k"-->
<!--                   :index1="k"-->
<!--                   v-if="cart_item.prod.length===1"-->
<!--                   @order_tap="order_tap"-->
<!--        ></OrderItem>-->


        <OrderItemRow :orderData="cart_item"
                      @order_tap="order_tap"
        >

        </OrderItemRow>

        <div class="textr lh44 bgfff pr20">
          <span class="fs14 c333">共{{cart_item.ordersModelList[0].num}}件商品 实付款: </span>
          <span class="fs14 c333 pl10 fbold corange">¥{{((order_type == 1 ? cart_item.orderPrice : cart_item.payPrice)/100)}}</span>
        </div>


        <!--退款-->
        <div class="lh44 pl20 bgfff fs14 c38 disflex align-cen bradiusbl10" v-if="order_type == 6">
          <static-resources src="yimai_photos/crm/refund.png" alt="" className="w16 h16 mr7" />
          退款原因：{{cart_item.refundRemark}}
        </div>

        <div class="textr lh30 pt10 pb10 fs14 bgfff bradiusbl10" v-if="order_type == 1">
          <span class="disinblock textc be8 ca8 bradius20 w90 mr10" @click="postRevoke(cart_item)">撤销订单</span>
          <span class="disinblock bgblue textc cfff bradius20 w90 mr10" @click="toIM(cart_item)">联系客户</span>
        </div>

        <div class="textr lh30 pt10 pb10 fs14 bgfff bradiusbl10" v-if="order_type == 2">
          <span class="disinblock textc be8 ca8 bradius20 w90 mr10" @click="toIM(cart_item)">联系客户</span>
          <span class="disinblock bgblue textc cfff bradius20 w90 mr10" @click="confirmShipment(cart_item)">确认发货</span>
        </div>

        <div class="textr lh30 pt10 pb10 fs14 bgfff bradiusbl10" v-if="order_type == 3">
          <span class="disinblock bgblue textc cfff bradius20 w90 h32 mr10" @click="toIM(cart_item)">联系客户</span>
        </div>

        <div class="textr lh30 pt10 pb10 fs14 bgfff bradiusbl10" v-if="order_type == 4">
          <span class="disinblock textc ca8 bradius20 w90 be8 mr10" @click="toIM(cart_item)">联系客户</span>
        </div>

        <div class="textr lh30 pt10 pb10 fs14 bgfff bradiusbl10" v-if="order_type == 5">
          <span class="disinblock textc be8 ca8 bradius20 w90 mr10" @click="toIM(cart_item)">联系客户</span>
          <span class="disinblock textc ca8 bradius20 w90 be8 mr10" v-if="cart_item.refundState == 2" @click="refusalOfRefund(cart_item)">拒绝退款</span>
          <span class="disinblock bgblue textc cfff bradius20 w90 mr10" v-if="cart_item.refundState == 2" @click="confirmRefund(cart_item)">确认退款</span>
        </div>
      </div>
    </div>
    <NoData v-else>暂无数据</NoData>

    <div class="textc disflex w60 h60 bradius50p bgblue disinblock goToUserCenter" @click="page_turn('mine')">
      <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/user_add.png" alt="" class="w30 h30 mt15">
    </div>

  </div>
</template>

<script>
  import OrderItem from '@/components/orderItem' // 订单项
  import OrderItemRow from '@/components/orderItemRow' // 订单项
  import NoData from '@/components/noData'
  import StaticResources from '@/components/StaticResources';
  import WXAJAX from '@/utils/request'

  export default {
    name: '',
    components: {OrderItem , OrderItemRow, StaticResources, NoData},
    data() {
      return{
        order_type :'1' ,
        cart_lists: [],
        loading: false,
      }
    },
    mounted() {
      wx.setNavigationBarTitle({
        title: "订单"
      });
      this.getOrder();
    },
    async onPullDownRefresh() {
      this.reset();
      this.getOrder();
      setTimeout(()=>{
        wx.stopPullDownRefresh();
      }, 1.5*1000)
    },
    onReachBottom(){
      this.getOrder();
    },
    methods: {
      toIM(orderInfo){
        const {userId, logo, name, personalWx, phone} = orderInfo;

        wx.navigateTo({url: '../IM/main?userId='+userId+'&logo='+logo+'&type=2'+'&name='+name+'&wxCode='+personalWx +'&phone='+phone})
      },
      page_turn(url){
        wx.reLaunch({url:'../'+url+'/main'});
      } ,
      order_tap(orderIds){
        wx.setStorageSync('orderState', this.order_type);

        wx.navigateTo({url: '/pages/orderDetail/main?orderIds=' + orderIds + '&orderState=' + this.order_type});
      },
      reset() {
        this.page = 1;
        this.nodata = false;
        this.isLoading = false;
        this.cart_lists = [];
      },
      getOrder(){
        WXAJAX.POST({
          //参数订单状态
          pageNum: this.page,
          orderState:this.order_type
        },'','/orders/selectOrdersInfo').then((data) => {
          this.cart_lists.push(...data);
        }).catch((err) =>{
        });
      },
      //(3)
      order_type_tap(type_id){
        //选择订单类型
        this.order_type = type_id;
        this.cart_lists=[];
        this.getOrder();
      },
      //(4)撤销订单
      postRevoke(cart_item){
        if(this.loading) return;

        this.loading=true;
        WXAJAX.POST({
          //参数订单状态
          orderState:5,
          ordersId :cart_item.ordersId,
        },'','/orders/updateOrderState').then((data) => {
          console.log("撤销成功")
          console.log(data)
          this.reset();
          this.getOrder();
        }).catch((err) =>{
          console.log("撤销失败")
        }).finally(()=>{
          this.loading =false;
        });
      },
      //(5)拒绝退款
      refusalOfRefund(cart_item){
        if(this.loading) return;
        this.loading = true;

        WXAJAX.POST({
          refundState:1,
          ordersId:cart_item.ordersId,
        },'','/orders/updateRefundState').then((data) => {
          console.log("拒绝退款成功")
          this.reset();
          this.getOrder()

        }).catch((err) =>{
          console.log("拒绝退款失败")
        }).finally(()=>{
          this.loading = false;
        });
        //重新请求
        // this.onceAgain()
      },
      //(6)确认退款
      confirmRefund(cart_item){
        if(this.loading) return;

        this.loading = true;
        WXAJAX.POST({
          refundState:3,
          ordersId :cart_item.ordersId,
        },'','/orders/updateRefundState').then((data) => {
          this.reset();
          this.getOrder()
        }).catch((err) =>{
          console.log("退款失败")
        }).finally(()=>{
          this.loading = false;
        });
        //重新请求
        // this.onceAgain()
      },
      // 确认发货
      confirmShipment(cart_item){
        if(this.loading) return;
        this.loading = true;
        WXAJAX.POST({
          //参数订单状态
          orderState:3,
          ordersId :cart_item.ordersId,
        },'','/orders/updateOrderState').then((data) => {
          console.log("发货成功")
          console.log(data)
          this.reset();
          this.getOrder()
        }).catch((err) =>{
          console.log("发货失败")
        }).finally(()=>{
          this.loading = false;
        });
        // this.onceAgain()
      },
      //(7)
      onceAgain(){
        WXAJAX.POST({
          //参数订单状态
          orderState:5
        },'','/orders/selectOrdersInfo').then((data) => {
          this.cart_lists = data;
          console.log("成功")
        }).catch((err) =>{
          console.log("失败")
        });
      }

    }
  }
</script>

<style>
  .ordertype .active{
    color: #51CDCB;
    border-bottom: 3px solid #51CDCB;
  }
  .goToUserCenter{
    position: fixed;
    right: 10px;
    bottom: 51px;
    z-index: 99;
    box-sizing: border-box;
    text-align: center;
  }
</style>








































